<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧医疗系统 - 医生端</title>
    <style>
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #ddd;
            height: 60px;
        }

        .container {
            width: 100%;
            height: calc(100vh - 60px);
            display: flex;
        }

        .sidebar {
            width: 200px;
            background: #333;
            padding: 20px;
            color: white;
        }

        .menu-item {
            padding: 10px;
            cursor: pointer;
            margin-bottom: 5px;
        }

        .menu-item:hover {
            background: #444;
        }

        .main-content {
            flex: 1;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table th, table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        table th {
            background: #f8f9fa;
        }

        .btn {
            padding: 5px 10px;
            cursor: pointer;
            border: none;
            background: #007bff;
            color: white;
            border-radius: 4px;
        }

        .btn:hover {
            background: #0056b3;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .form-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>

<body>
<div class="header">
    <div class="logo">智慧医疗系统</div>
    <div class="user-info">
        医生：<span id="doctorName">李医生</span> | 科室：<span id="department">内科</span>
        <button class="btn" onclick="logout()">退出登录</button>
    </div>
</div>

<div class="container">
    <div class="sidebar">
        <div class="menu-item" onclick="showSection('patients')">患者管理</div>
        <div class="menu-item" onclick="showSection('appointments')">挂号信息</div>
        <div class="menu-item" onclick="showSection('reports')">检查报告管理</div>
    </div>
    <div class="main-content">
        <!-- 患者管理界面 -->
        <div id="patients" class="content-section" style="display: none;">
            <h2>患者管理</h2>
            <div class="patient-card">
                <h3>张三 (P123)</h3>
                <p>年龄：35岁</p>
                <p>最近就诊：2023-10-25</p>
            </div>
            <div class="patient-card">
                <h3>李四 (P124)</h3>
                <p>年龄：42岁</p>
                <p>最近就诊：2023-10-24</p>
            </div>
        </div>

        <!-- 挂号信息界面 -->
        <div id="appointments" class="content-section" style="display: none;">
            <h2>挂号信息</h2>
            <table>
                <thead>
                <tr>
                    <th>挂号ID</th>
                    <th>患者ID</th>
                    <th>时间</th>
                    <th>医生ID</th>
                    <th>科室ID</th>
                    <th>备注</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>R000000001</td>
                    <td>0001</td>
                    <td>2025-01-13 15:00</td>
                    <td>0002</td>
                    <td>0002</td>
                    <td>更新后的挂号备注</td>
                    <td class="status">待就诊</td>
                    <td><button class="btn" onclick="startDiagnosis('R000000001')">开始就诊</button></td>
                </tr>
                <tr>
                    <td>R000000002</td>
                    <td>0006</td>
                    <td>2025-01-11 09:00</td>
                    <td>0008</td>
                    <td>0001</td>
                    <td>常规检查，心内科</td>
                    <td class="status">待就诊</td>
                    <td><button class="btn" onclick="startDiagnosis('R000000002')">开始就诊</button></td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 检查报告管理界面 -->
        <div id="reports" class="content-section" style="display: none;">
            <h2>检查报告管理</h2>
            <div class="form-group">
                <label for="patientSelect">选择患者：</label>
                <select id="patientSelect" onchange="onPatientSelect()">
                    <option value="">请选择患者</option>
                    <option value="P123">张三 (P123)</option>
                    <option value="P124">李四 (P124)</option>
                </select>
            </div>
            <div id="reportForm" style="display: none;">
                <div class="form-group">
                    <label>诊断意见：</label>
                    <textarea rows="4"></textarea>
                </div>
                <div class="form-group">
                    <label>处方建议：</label>
                    <textarea rows="4"></textarea>
                </div>
                <button class="btn">提交报告</button>
            </div>
        </div>
    </div>
</div>

<script>
    function logout() {
        alert("退出登录");
    }

    function showSection(sectionId) {
        const sections = document.querySelectorAll('.content-section');
        sections.forEach(section => section.style.display = 'none');
        document.getElementById(sectionId).style.display = 'block';
    }

    function startDiagnosis(registeId) {
        alert("挂号ID " + registeId + " 开始就诊！");
    }

    function onPatientSelect() {
        const select = document.getElementById('patientSelect');
        const reportForm = document.getElementById('reportForm');
        if (select.value) {
            reportForm.style.display = 'block';
        } else {
            reportForm.style.display = 'none';
        }
    }
</script>
</body>

</html>
